<template>
	<div class="ele-body">
		<a-card :bordered="false" title="首饰采购信息">
			<table cellpadding="0" cellspacing="0" class="recepit_table2">
				<tbody>
					<tr>
						<td class="tit">收货方式</td>
						<td>{{ info.purchase_receive_type_name || '' }}</td>
						<td class="tit">货品类别</td>
						<td>{{ info.goods_category_type_name || '' }}</td>
						<td class="tit">仓库位置</td>
						<td>{{ info.warehouse_code_name || '' }}</td>
					</tr>
				</tbody>
			</table>
			<div class="margin-y-30">
				<a-form
					class="margin-y-15"
					:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
					:wrapper-col="{
						md: { span: 17 },
						sm: { span: 20 },
						xs: { span: 24 }
					}"
				>
					<a-row :gutter="24">
						<a-col :md="24" :sm="24" :xs="24">
							<goodsDetailTable :info="info" :goods="receipts_detail" :table1="table1" :table2="table2" v-if="receipts_detail.length > 0" />
						</a-col>
					</a-row>
				</a-form>
			</div>
		</a-card>
	</div>
</template>

<script setup>
import { ref, reactive, unref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { DownOutlined, UpOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { actionFn } from '@/utils/action.js';
import goodsTable from '@/components/jewelry/goodsTable.vue';
import selectGoods from '@/components/jewelry/select-goods.vue';
import goodsDetail from './components/goods-detail.vue';
import { uploadUrl } from '@/config/setting';
import { goods_info } from '@/api/jewelry/goods_info';
import goodsDetailTable from '@/components/jewelry/goodsDetailTable.vue';

const { currentRoute, push } = useRouter();
const { query } = unref(currentRoute);
const loading = ref(false);
const info = ref({});
const receipts_detail = ref({});

//主石信息
const table1 = reactive({
	loading: false,
	column: [],
	tableData: []
});
//副石信息
const table2 = reactive({
	loading: false,
	column: [],
	tableData: []
});
onMounted(() => {
	getDetail();
});
const getDetail = () => {
	goods_info({ code: query.code }).then(res => {
		info.value.thumb_url = res.thumb_url;
		info.value.purchase_receive_type_name = res.purchase_receive_type_name;
		info.value.goods_category_type_name = res.goods_category_type_name;
		info.value.warehouse_code_name = res.warehouse_code_name;
		receipts_detail.value = res.sku_info;
		table1.column = res.master_gem.column;
		table1.tableData = res.master_gem.row_list;
		table2.column = res.vice_gem.column;
		table2.tableData = res.vice_gem.row_list;
	});
};
</script>

<style lang="less" scoped>
:deep(.ant-upload.ant-upload-select.ant-upload-select-text) {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 440px !important;
	height: 180px !important;
	background-color: #fafafa;
	border: 1px dashed #d9d9d9;
	.ant-upload {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		cursor: pointer;
	}
}
</style>
